<template>
  <div>
    <div class="steps_div">
      <el-steps :active="active" process-status="finish" align-center>
        <el-step title="选择活动"></el-step>
        <el-step title="选择商品"></el-step>
      </el-steps>
    </div>
    <template v-if="active == 0">
      <el-table :key="rk" :data="list">
        <el-table-column prop="title" label="活动名称"></el-table-column>
        <el-table-column prop="type" label="活动类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 1 ? '普通拼团' : '阶梯拼团' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="活动时间">
          <template slot-scope="scope">
            <span>{{ scope.row.start_time }}</span>
            <br />
            <span>{{ scope.row.end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column width="120px" label="操作">
          <template slot-scope="scope">
            <el-button :type="scope.row.checked ? 'primary' : ''" @click="selectItem(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </template>
    <template v-if="active == 1">
      <el-table :data="prolist">
        <el-table-column prop="type" label="商品">
          <template slot-scope="scope">
            <div class="product-item">
              <vimage :src="scope.row.goods.master"></vimage>
              <span>{{ scope.row.goods.name }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column width="120px" label="操作">
          <template slot-scope="scope">
            <el-button :type="scope.row.checked ? 'primary' : ''" @click="selectItem1(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </template>
    <span class="dialog-footer">
      <el-button @click="active = 0" v-if="active == 1">重新选择</el-button>
      <el-button v-if="active == 1" type="primary" @click="outData">确 定</el-button>
    </span>
  </div>
</template>

<script>
import {getgrouplist, getgroup} from '@/api/mall/groupon';
export default {
  data() {
    return {
      isLoading: false,
      radio: 1,
      pro: {
        name: ''
      },
      proTemp: {},
      list: [],
      //outlist:[],
      page: 1,
      size: 5,
      total: 0,
      rk: 1,
      selectId: '',
      prolist: [],
      selectlist: []
    };
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    g_id: {
      type: Number,
      default: function() {
        return 0;
      }
    },

    active: {
      type: Number,
      default: 0
    },
    limit: {
      type: Number,
      default: 0
    }
  },
  created() {},
  mounted() {
    this.selectId = JSON.parse(JSON.stringify(this.g_id));
    this.selectlist = JSON.parse(JSON.stringify(this.data));

    this.searchData();
  },
  methods: {
    getdetail(id, type) {
      let data = {
        id: id,
        n_load: 1
      };
      getgroup(data).then(res => {
        this.active = 1;
        this.selectdata = {
          id: res.msg.id,
          name: res.msg.title
        };
        let prolist = res.msg.commodity;
        if (type == 1) {
          prolist.forEach(a => {
            a.checked = false;
          });
        } else {
          prolist.forEach(e => {
            console.log(this.selectlist);
            if (this.selectlist.findIndex(_ => _.id == e.commodity_id) > -1) {
              e.checked = true;
            } else {
              e.checked = false;
            }
          });
        }

        this.prolist = prolist;
      });
    },
    //搜索数据
    searchData() {
      this.proTemp = Object.assign({}, this.pro);
      this.getData();
    },
    //搜索数据本体
    getData() {
      this.isLoading = true;
      let data = {
        page: this.page,
        size: this.size,
        search: {
          status: '0,1'
        }
      };
      getgrouplist(data).then(res => {
        this.isLoading = false;
        let list = res.msg.data;

        this.list = list;
        //筛选哪些数据是传入的已选择数据
        this.list.forEach(e => {
          console.log(e.id, this.g_id, this.selectId);
          if (e.id == this.selectId) {
            e.checked = true;
          } else {
            e.checked = false;
          }
        });
        this.total = res.msg.total;
      });
    },
    //选择单条记录
    selectItem(item) {
      if (!item.checked) {
        this.list.forEach(a => {
          a.checked = false;
        });
        item.checked = true;
        this.selectId = item.id;
        this.selectlist = [];
        this.getdetail(item.id, 1);
      } else {
        //移除数据
        item.checked = false;
        this.selectId = '';
        this.selectdata = {};
      }
      this.rk++;
    },
    selectItem1(item) {
      if (!item.checked) {
        if (this.selectlist.length < this.limit) {
          item.checked = true;
          this.selectlist.push(item.goods);
        } else {
        }
      } else {
        //移除数据
        item.checked = false;
        this.selectlist.splice(this.selectlist.findIndex(_ => _.id == item.id), 1);
      }
      // this.rk++;
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
    //确定选择数据
    outData() {
      this.$emit('outData', this.selectdata, this.selectlist);
      //this.$emit('outData');
    }
  }
};
</script>

<style scoped lang="scss">
.steps_div {
  padding: 0 120px;
  margin-bottom: 20px;
}
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
